<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 1000px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        #box li {
            width: 200px;
            height: 400px;
            border: 1px solid gray;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 20px;
        }

        li img {
            width: 100px;
            height: 140px;
            margin: 0 auto;
        }

        ul,
        li {
            list-style: none;
        }

        #box h3 {
            font-size: 20px;
        }

        #box p {
            font-size: 16px;
            line-height: 8px;
        }
    </style>
</head>

<body>
    <h2>根据数据生成一个商品列表</h2>
    <button>根据价格排序</button>
    <button>根据销量排序</button>
    <button>根据评价排序</button>
    <ul id="box">
    </ul>


    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '荣耀7',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '黑色',
            evaluate: 3243,
            sales: 123
        }];
        var btn = document.getElementsByTagName('button');
        for (i = 0; i < btn.length; i++) {
            var res = [];
            var res1 = []
            var res2 = [];

            btn[i].onclick = function () {
                res = data.sort(function (a, b) {
                    return a.sale - b.sale
                })
                box.innerHTML = ''
                if (this.innerHTML === '根据价格排序') {
                    for (var n = 0; n < res.length; n++) {
                        box.innerHTML += '<li>' +
                            '<img src="' + data[n].imgurl + '" alt="">' +
                            '<h3>' + data[n].name + '</h3>' +
                            '<p>颜色:' + data[n].color + '</p>' +
                            '<p>原价:<del>' + data[n].price + '</del></p>' +
                            '<p>现价:<span style ="color:red"> ' + data[n].sale + '</span> </p>' +
                            '<p>销量:' + data[n].sales + '</p>' +
                            '<p>评价：' + data[n].evaluate + '</p>' +
                            '</li>';
                    }
                }
                else if (this.innerHTML === '根据销量排序') {
                    res1 = data.sort(function (a, b) {
                        return b.sales - a.sales
                    })
                    box.innerHTML = ''
                    for (var n = 0; n < res1.length; n++) {
                        box.innerHTML += '<li>' +
                            '<img src="' + data[n].imgurl + '" alt="">' +
                            '<h3>' + data[n].name + '</h3>' +
                            '<p>颜色:' + data[n].color + '</p>' +
                            '<p>原价:<del>' + data[n].price + '</del></p>' +
                            '<p>现价:<span style ="color:red"> ' + data[n].sale + '</span> </p>' +
                            '<p>销量:' + data[n].sales + '</p>' +
                            '<p>评价：' + data[n].evaluate + '</p>' +
                            '</li>';
                    }
                }
                else if (this.innerHTML === '根据评价排序') {
                    box.innerHTML = ''
                    res2 = data.sort(function (a, b) {
                        return b.evaluate - a.evaluate
                    })
                    console.log(res2)
                    for (var n = 0; n < res2.length; n++) {
                        box.innerHTML += '<li>' +
                            '<img src="' + data[n].imgurl + '" alt="">' +
                            '<h3>' + data[n].name + '</h3>' +
                            '<p>颜色:' + data[n].color + '</p>' +
                            '<p>原价:<del>' + data[n].price + '</del></p>' +
                            '<p>现价:<span style ="color:red"> ' + data[n].sale + '</span> </p>' +
                            '<p>销量:' + data[n].sales + '</p>' +
                            '<p>评价：' + data[n].evaluate + '</p>' +
                            '</li>';
                    }
                }
            }
        }
        for (var i = 0; i < data.length; i++) {
            box.innerHTML += '<li>' +
                '<img src="' + data[i].imgurl + '" alt="">' +
                '<h3>' + data[i].name + '</h3>' +
                '<p>颜色:' + data[i].color + '</p>' +
                '<p>原价:<del>' + data[i].price + '</del></p>' +
                '<p>现价:<span style ="color:red"> ' + data[i].sale + '</span> </p>' +
                '<p>销量:' + data[i].sales + '</p>' +
                '<p>评价：' + data[i].evaluate + '</p>' +
                '</li>'
        }





    </script>
</body>

</html>